import React, { Component } from 'react'
import Header from '../../components/Headers/Headers'
import logo from '../../assets/images/logo/pic_logo_orange.png'
import { connect } from 'react-redux'
import { actions, get_login_user } from '../../store/modules/login'
import { bindActionCreators } from 'redux'

import '../Register/register.css'
class Login extends Component {
    render() {
        let { user, loginActions: { change_login_user, reqLogin } } = this.props
        return (
            <div>
                <Header {...this.props} title={"登录"} register={true} back={true}></Header>
                <div className="register_img">
                    <img src={logo} alt="" />
                </div>
                <div className="register_form">
                    <div><span>手机号:</span><input type="text" value={user.phone} onChange={(e) => change_login_user(e.target.value, "phone")} placeholder="请输入手机号" /></div>
                    <div><span>密码:</span><input type="text" value={user.password} onChange={(e) => change_login_user(e.target.value, "password")} placeholder="请输入密码" /></div>
                </div>
                <div className="register_button">
                    <button className="register_btn" onClick={() => reqLogin(this.props.history)}>登录</button>
                </div>
            </div>
        )
    }
}

let mapStateToProps = state => ({
    user: get_login_user(state)
})
let mapDispatchToProps = dispatch => ({
    loginActions: bindActionCreators(actions, dispatch)
})

export default connect(mapStateToProps, mapDispatchToProps)(Login)
